<template>
    <el-container>
        <div class="group-container">
            <div class="group-label">功能</div>
            <el-button type="primary" @click="handleSpecific" ref="特定" :class="specific.is ? 'clicked' : ''"
                style="height: 28px;">特定</el-button>
        </div>
        <div class="group-container" v-for="group in btnGroups">
            <div class="group-label">筛选({{ group.name }})</div>
            <el-button v-for="item in group.btns" v-bind:key="item.name" :ref="item.name" type="primary"
                @click="_handleStatusFilter(item)" :class="checkButtonClicked(item) ? 'clicked' : ''"
                style="height: 28px;">{{
                item.name }}</el-button>
        </div>
        <div class="group-container page-container">
            <div class="group-label">分页</div>
            <el-pagination v-if="config.showPage" background layout="prev, pager, next" style="padding-top: 0px;"
                :page-size="config.pageSize" @current-change="handleCurrentChange" :total="config.total">
            </el-pagination>
        </div>
    </el-container>
</template>

<style lang="scss">
.page-container {
    margin-left: auto !important;
}

.clicked {
    border-color: #67C23A !important;
    background-color: #67C23A !important;
}

.group-container {
    position: relative;
    padding: 10px 10px 6px 10px;
    border: 1px solid #d7dae2;
    border-radius: 4px;
    margin-right: 10px;
    display: inline-block !important;
    width: auto !important;

    .group-label {
        position: absolute;
        font-size: 11px;
        font-weight: bold;
        color: #909399;
        top: -9px;
        left: 10px;
        padding: 0 6px;
        background-color: #fff;
        z-index: 1;
    }
}
</style>

<script>
const lodash = require('lodash')

export default {
    name: 'JobFilterBtnGroup',
    props: {
        config: {
            type: Object,
            default: () => {
                return {
                    total: 1,
                    pageSize: 10,
                    showPage: true,
                    add: true,
                    refresh: true,
                    statusBtns: [
                        { status: 0, name: "待采集", key: "status" },
                        { status: 1, name: "已采集", key: "status" },
                        { status: 2, name: "已生成", key: "status" },
                        { status: 3, name: "已发布", key: "status" }
                    ]
                }
            }
        },
        specific: {
            type: Object,
            default: () => {
                return { is: false }
            }
        },
        whereDict: {
            type: Object,
            default: () => {
                return {}
            }
        },
    },
    mounted() {
        console.log("JobFilterBtnGroup:", this.specific)
    },
    data() {
        return {
            btnGroups: this.handleStatusBtns()
        }
    },
    methods: {
        handleSpecific(e) {
            this.$emit("handleClick", {
                name: "handleSpecific", value: {
                    data: "特定", refs: this.$refs, className: "clicked"
                }
            })
        },
        handleCurrentChange(page) {
            this.$emit("handleClick", { name: "handleCurrentPage", value: page })
        },
        _handleStatusFilter(row) {
            this.beforeStatusFilter(this.$refs, row)
            this.handleStatusFilter(row)
        },
        beforeStatusFilter(refs, row) {
            this.$emit("handleClick", {
                name: "beforeStatusFilter", value: {
                    data: row, refs: refs, className: "clicked"
                }
            })
        },
        handleStatusFilter(row) {
            this.$emit("handleClick", { name: "handleStatusFilter", value: row })
        },
        checkButtonClicked(btn) {
            if (this.whereDict[btn.key] && this.whereDict[btn.key].includes(btn.status)) {
                return true
            }
            return false
        },
        handleStatusBtns() {
            let groups = lodash.groupBy(this.config.statusBtns, "key")
            let btnGroups = []
            let keys = Object.keys(groups)
            for (let key of keys) {
                let btnGroup = {
                    name: key,
                    btns: groups[key]
                }
                btnGroups.push(btnGroup)
            }
            return btnGroups
        }
    }
}

</script>